import PlaybookDetail from './partials/PlaybookDetail'
import QueryTablePagination from '~/components/QueryTablePagination'
import { useState, useRef } from 'react'
import { Button, Form, message, Popconfirm, Space } from 'antd'
import { getColumns, getOperationItemConfig } from './helper'
import { useRowSelection } from '~/hooks'
import { PlayBookService } from '@/service'
import PlayBaseModal from './partials/PlayBaseModal'
import styles from './index.module.less'
import { CodeMirror, SchedulerModal } from '@/components'
import { useAsync } from '@/hooks'
import SwitchNode from '@/components/WorkFlow/node/DecisionNode'

const Playbook = props => {
  const [isRefresh, setIsRefresh] = useState(false)
  const { selectedRowKeys, selectedRows, onChange } = useRowSelection()
  const schedulerModalRef = useRef()
  const onOpen = (type, record = {}) => {
    switch (type) {
      case 'control':
        schedulerModalRef.current.initModal({
          playbook_ids: record.id
        })
        break
      case 'update':
      case 'check':
      case 'copy':
        setDetail({
          type,
          visible: true,
          data: { id: record.id, ...record.wf_data }
        })
        break
      case 'edit':
      default:
        setModal({ type, visible: true })
        break
    }
  }
  const onDelete = data => {
    PlayBookService.deletePlay(data).then(res => {
      message.success('删除成功！')
      setIsRefresh(true)
    })
  }
  const [modal, setModal] = useState({
    type: 'add',
    visible: false
  })
  const [detail, setDetail] = useState({
    type: 'add',
    visible: false,
    data: {}
  })
  const [schedulerModal, setSchedulerModal] = useState({
    visible: false
  })
  const { data: playbookAllList } = useAsync(
    PlayBookService.queryPlayAllList,
    {},
    []
  )

  return (
    <div className={styles['playbook-container']}>
      <QueryTablePagination
        title="剧本列表"
        isRefresh={isRefresh}
        setIsRefresh={setIsRefresh}
        canSearch={false}
        columns={getColumns()}
        service={PlayBookService.queryPlayList}
        rowSelection={{ selectedRowKeys, onChange }}
        operation={{
          operationItemConfig: getOperationItemConfig(onOpen, onDelete),
          width: 250
        }}
      >
        <Space>
          <Button type="primary" onClick={() => onOpen('add')}>
            创建剧本
          </Button>
          {/* <Button>导入</Button>
            <Button>导出</Button>
            <Button>授权</Button> */}
          <Popconfirm
            title="您确定要删除吗?"
            onConfirm={() => onDelete({ ids: selectedRowKeys })}
            okText="确定"
            cancelText="取消"
          >
            <Button disabled={selectedRowKeys.length === 0}>删除</Button>
          </Popconfirm>
        </Space>
      </QueryTablePagination>
      <PlaybookDetail
        detail={detail}
        setDetail={setDetail}
        onOpen={onOpen}
        setIsRefresh={setIsRefresh}
      />
      <PlayBaseModal
        modal={modal}
        setModal={setModal}
        detail={detail}
        setDetail={setDetail}
        setIsRefresh={setIsRefresh}
      />
      <SchedulerModal
        ref={schedulerModalRef}
        title="新建调度"
        {...schedulerModal}
        setSchedulerModal={setSchedulerModal}
        playbookAllList={playbookAllList}
      />
    </div>
  )
}
export default Playbook
